import React from "react";
import {connect} from "react-redux";
import { Button,Layout,Menu,Pagination,Table } from 'element-react';
import {downGoods,upGoods,delGoods} from "../actions/actions";

var _ = require("lodash")

class Complex extends React.Component {
    //   componentDidMount(){
    //       var all = 0;
    //       var cartsList = _.uniqWith(this.props.carts,_.isEqual);
    //       cartsList.map((val,idx)=>{
    //           all += val._price*val.quantity
    //       });
    //       this.setState({
    //           all_price:all
    //       })
    //   }
    render () {
        var data = [];
        var cartsList = _.uniqWith(this.props.carts,_.isEqual);
        data = cartsList;
        var all = 0;
        var all_price = 0
        cartsList.map((val,idx)=>{
            all += val._price*val.quantity
        });
        all_price = all;

        var columns= [
            {
                type:"selection",
                align: 'center',
            },
            {
                label:"商品图片",
                align: 'center',
                render: (row,column,index) => {
                    return <img width="100" height="100" src={`http://127.0.0.1:3000/${row.thumb[0].filename}`}/>
                }
            },
            {
              label: "商品名称",
              prop: "title",
              align: 'center',
            },
            {
              label: "单价",
              prop: "_price",
              align: 'center',
            },
            {
                label:"数量",
                align: 'center',
                render: (row,column,index) => {   
                    function down(){
                        this.props.downGoods(row);
                    }    
                    function up(){
                        this.props.upGoods(row);
                    }     
                    return  <p>
                                <span className="down_num" data="1" onClick={down.bind(this)}>-</span>
                                <b type="text" className="_num">{row.quantity}</b>
                                <span className="up_num" data="0" onClick={up.bind(this)}>+</span>
                            </p>
                }
            },
            {
                label:"总价",
                align: 'center',
                render: (row,column,index) => {
                    var allPrice = row.quantity*row._price;                    
                    return <e>{allPrice} 元</e>
                }
            },
            {
                label: "操作",
                prop: "address",
                align: 'center',
                render: (row,column,index) => {
                  function del(){
                      this.props.delGoods(row);
                  }
                  return (
                    <span>
                     <Button plain={true} type="info" size="small">编辑</Button>
                     <Button type="danger" size="small" onClick={del.bind(this)}>删除</Button>
                    </span>
                  )
                }
            }
          ];

        return (
            <div className="carts">
                <div className="clearfix autoAll">
                    <Table
                        style={{width: '100%'}}
                        columns={columns}
                        data={data}
                        border={true}
                    />
                    
                </div>
                <div className="autoAll clearfix content_bot carts_bottom">
                    <p className="left all_price">总金额：<b className="mon">{all_price}</b> 元</p>
                    <a type="botton" className="btn btn-success right">结算</a>
                </div>
            </div>
        )
    }
};

const mapStateToProps = (state) => {
    return {
        carts:state.reducer.carts
    }
}

const NewComplex = connect(
    mapStateToProps,
    {downGoods,upGoods,delGoods},

)(Complex);

module.exports = NewComplex;